<template>
    <div class="ivu-custom">
        <Form ref="form" :model="article" :rules="rules" :label-width="100">
            <FormItem label="信息标题" prop="title">
                <Input v-model="article.title" placeholder="请输入要发布文章的标题"></Input>
            </FormItem>
            <FormItem label="文章主类别" prop="p_type">
                <Select v-model="article.p_type" style="width:200px">
                    <Option value="notice">通知公告</Option>
                    <Option value="news">新闻资讯</Option>
                    <Option value="laws">政策法规</Option>
                </Select>
            </FormItem>
            <FormItem label="文章类别" prop="a_type">
                <Select v-model="article.a_type" style="width:200px">
                    <Option v-for="item in chosen_type" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="添加视频" prop="video">
                <UploadedList v-model="article.video" :format="['flv']"></UploadedList>
            </FormItem>
            <FormItem label="文章内容">
                <UE ref="ue" v-model="article.content"></UE>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleAdd">{{ article.id ? "保存" : "发布" }}信息</Button>
                <Button type="warning" @click="handleCancel">取消</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import Article from "@/common/model/Article"
import UE from '@/common/components/UE'
import UploadedList from "@/common/components/UploadedList"

export default {
    name: "InfoPost",
    props: {
        value: {
            type: Number,
            default: 0
        }
    },
    components: {
        UE, UploadedList
    },
    data () {
        return {
            article: new Article(),
            rules: {
                title: [
                    { required:true, message: '标题不能为空', trigger: 'blur' }
                ],
                p_type: [
                    { required: true, message: '文章大类不能为空', trigger: 'change' }
                ]
            },
        }
    },
    computed:{
        chosen_type () {
            if(this.article.p_type == "notice") {
                return this.tree.notice.children;
            }else if(this.article.p_type == "news") {
                return this.tree.news.children;
            }else {
                return this.tree.laws.children;
            } 
        },
        tree() {
            return this.$store.state.app.dicTree;
        }
    },
    methods:{
        handleAdd(){
            this.$refs["form"].validate((valid) => {
                if (!valid) return;
                this.article.content = this.$refs.ue.getUEContent();
                var url = this.article.id ? "article/modify" : "article/add";
                var message = this.article.id ? "文章修改成功!" : "文章发布成功!";
                var emit = this.article.id ? "on-modify" : "on-add";
                this.api.post(url, this.article.serialize(), res => {
                    this.$CustomMessage.success(message);
                    this.$emit(emit, this.article);
                });
            });
        },
        handleCancel(){
            this.$emit("on-cancel", this.article);
        },
        getArticle() {
            return this.article;
        },
        init() {
            this.article = new Article();
            if(this.value){
                this.api.post("article/get",{id: this.value},res=>{
                    this.article.parse(res.data);
                })
            }
        }
    },
    created(){
        this.init();
    },
    watch: {
        value() {
            this.init();
        }
    }
};
</script>